// src/components/Navbar/Navbar.js
import strNavbarHtml from "./Navbar.html";
import { DomUtils } from "../../utils/DomUtils";
import { NotificationItem } from "./Notification/NotificationItem";
import { MessageItem } from "./Message/MessageItem";
import { UserInfoItem } from "./UserInfo/UserInfoItem";

export class Navbar {
  constructor(menuConfig, notifications, messages, userInfo) {
    this.menuConfig = menuConfig;
    this.notifications = notifications;
    this.messages = messages;
    this.userInfo = userInfo;
  }

  renderMenuItems(menuItems) {
    let menuHtml = "";
    menuItems.forEach((item) => {
      if (item.children && item.children.length > 0) {
        const subMenuHtml = this.renderMenuItems(item.children);
        menuHtml += `
          <li>
            <a data-toggle="collapse" data-target="#${item.name}" href="#">
              <i class="${item.icon}"></i>
              ${item.name}
              <span class="admin-project-icon adminpro-icon adminpro-down-arrow"></span>
            </a>
            <ul id="${item.name}" class="collapse dropdown-header-top">
              ${subMenuHtml}
            </ul>
          </li>
        `;
      } else {
        menuHtml += `
          <li>
            <a href="${item.path}">
              <i class="${item.icon}"></i>
              ${item.name}
            </a>
          </li>
        `;
      }
    });
    return menuHtml;
  }

  renderNotifications() {
    let notificationHtml = "";
    this.notifications.forEach((notification) => {
      const notificationItem = new NotificationItem(notification);
      notificationHtml += notificationItem.render().outerHTML;
    });
    return notificationHtml;
  }

  renderMessages() {
    let messageHtml = "";
    this.messages.forEach((message) => {
      const messageItem = new MessageItem(message);
      messageHtml += messageItem.render().outerHTML;
    });
    return messageHtml;
  }

  renderUserInfo() {
    const userInfoItem = new UserInfoItem(this.userInfo);
    return userInfoItem.render().outerHTML;
  }

  // 新增异步数据加载方法
  async loadData() {
    try {
      // 假设这里有获取通知和消息的服务
      const [notifications, messages] = await Promise.all([
        userService.getNotifications(), // 调用获取通知的服务
        userService.getMessages(), // 调用获取消息的服务
      ]);
      this.notifications = notifications;
      this.messages = messages;
    } catch (error) {
      console.error("Failed to load data:", error);
    }
  }
  render() {
    let strHtml = strNavbarHtml;
    const menuHtml = this.renderMenuItems(this.menuConfig);
    const notificationHtml = this.renderNotifications();
    const messageHtml = this.renderMessages();
    const userInfoHtml = this.renderUserInfo();

    strHtml = strHtml.replace("{{menuItems}}", menuHtml);
    strHtml = strHtml.replace("{{notifications}}", notificationHtml);
    strHtml = strHtml.replace("{{messages}}", messageHtml);
    strHtml = strHtml.replace("{{userInfo}}", userInfoHtml);

    return DomUtils.convertToDom(strHtml);
  }
  // 新增异步数据加载方法
}
